<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin:0px;padding:0px;
		}
		.windows{
			width:1200px;height:300px;background: #ccc;margin:100px auto;
		}

		/*限定队列长度为2400，即只有两个人排队*/
		div.lists{
			width: 2400px;
		}

		ul.lists-unit{
			width:1200px;height:300px;float:left;
		}
		/*为每个队列单位加上不同的背景颜色来区分*/
		ul.lists-unit.u1{
			background: #f00;
		}
		ul.lists-unit.u2{
			background: #008000;
		}
		ul.lists-unit.u3{
			background: #00a5c1;
		}
		.clear_both{
			clear:both;
		}

	</style>
</head>
<body>

	<!-- 窗口是1200px -->

	<div class="windows" title="窗口">

		<!-- 队列 队列的长度是不定的，但是队列的单位是 1200px -->

		 <!-- 总队列 -->
		 <div class="lists">

		 	<!-- 每一个排队的单位,假设有3个单位,队列是排成直线
			    并且是从左向右排的，所以要设置浮动
		 	 -->
		 	<ul class="lists-unit u1"></ul>
		 	<ul class="lists-unit u2"></ul>

		 	<!-- 想到浮动，马上想到清楚 -->
		 	<div class="clear_both"></div>
		 </div>


	</div>







</body>
</html>
<script type="text/javascript">

	// 如果把 <ul class="lists-unit u1"></ul>  往左边移动1200px，那u2就会跟着过来

	var u1 = document.getElementsByClassName('u1')[0];
	// u1.style.marginLeft = '-1200px';

	// 如果我是每30毫秒移动一次呢？
	var sum = 0;
	var timer = setInterval(function(){

		sum += 600;
		// 因为只要移动1200px就可以了，所以sum只要大于等于1200就停止执行

		if(sum >= 1200){
			clearInterval(timer);
		}
		var m = '-'+sum+'px';
		console.log(sum);
		console.log(m);
		u1.style.marginLeft = m;

	},100);


</script>










